
@import "variables";

.tickets-form {
  margin-top: 15px;
  .group {
    display: flex;
    padding: pxTorem(30); //  height: pxTorem(88);
    @include font-dpr(28px);
    background-color: #fff;
    .content {
      flex: 1;
    }
    em {
      display: inline-block; // width: 15%;
      width: pxTorem(120);
      margin-right: pxTorem(40);
      text-align: justify;
      color: color($h5, c3);
    }
    .clear{

      @include icon(28, 28, '#{$icons-path}/clear.png');
    }
    input,
    p {
      width: 100%;
    }
    textarea {
      font-family: STHeiti, Microsoft YaHei, Helvetica, Arial, sans-serif;
    }
    input,
    textarea,
    p {
      flex: 1;
      width: 100%;
      color: color($h5, c2);
    }
    .error-tip {
      padding-top: pxTorem(22);
      @include font-dpr(24px);
      color: color($h5, c11);
    }
  }
  .address-group {
    position: relative;
    align-items: flex-start;
    height: auto;
    padding-bottom: 0;
    textarea {
      height: pxTorem(150);
      padding: 0;
      resize: none;
      border: none;
    }
    .error-tip {
      position: absolute;
      top: pxTorem(56);
      padding-bottom: pxTorem(22);
    }
  }
  .ticket-bottom {
    background-color: #fff;
    margin-top:15px;
    &.has-error{
      height: auto;
    }
    select{
      width: 100%;
      border:none;
      color: #c1c1c1;
      background:#fff;
      font-family: STHeiti, Microsoft YaHei, Helvetica, Arial, sans-serif;
      appearance:none;
      -moz-appearance:none;
      -webkit-appearance:none;
      &.has-change {
        color:#333333;
      }
    }
    .content {
      width: 100%;
      &.has-select{
        .error-tip {
          padding-top: pxTorem(22);
          @include font-dpr(24px);
          color: color($h5, c11);
          display: block;
        }

      }
    }
  }
  .switch-group {
    // justify-content: space-between;
    margin-top: pxTorem(15);
    em {
      width: auto;
    }
    input {
      flex: inherit;
      width: auto;
    }
    &.beautify {
      position: relative;
    }
    &.beautify input[type=checkbox] {
      position: absolute;
      z-index: -1;
    }
    &.beautify label {
      position: absolute;
      right: pxTorem(30);
      top: 0;
      bottom: 0;
      width: pxTorem(80);
      height: pxTorem(50);
      margin: auto;
      border-radius: pxTorem(25);
      background-color: #d2d1d1;
    }
    &.beautify label:before {
      content: '';
      display: inline-block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: pxTorem(4);
      width: pxTorem(44);
      height: pxTorem(44);
      margin: auto;
      transition: all .2s ease-out;
      border-radius: 50%;
      background-color: #fff;
    }
    &.beautify input[type=checkbox]:checked+label:before {
      left: pxTorem(32);
    }
    &.beautify input[type=checkbox]:checked+label {
      background-color: color($h5, c1);
    }
  }
  .btn-box {
    padding: pxTorem(60) pxTorem(30);
    button {
      width: 100%;
      height: pxTorem(88);
      line-height: pxTorem(88);
      border-radius: 4px;
      @include font-dpr(30px);
      color: #fff;
      background-color: color($h5, c1);
      &:disabled {
        opacity: 0.4;
      }
    }
  }

  .choose{
    margin-top:pxTorem(10px);
    top:pxTorem(60px);
    right: pxTorem(20px);
    width: pxTorem(20px);
    height: pxTorem(20px);
    display: block;
    border-top: 1px solid color($h5,c4);
    border-right: 1px solid color($h5,c4);
    border-bottom: 1px solid transparent;
    border-left: 1px solid transparent;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }

}
.regio-picker {
  display: none;
  position: absolute;
  top: 0;
  width: 100%;
  &.showPicker {
    display: block;
  }
}




